layui.define(['element', 'exception', 'common'], function (exports) { //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
    $ = layui.jquery,
        element = layui.element,
        exception = layui.exception,
        common = layui.common;

    var Timeline = function () {
        var _that = this;
        _that.info = {
            name: 'Timeline',
            version: 'v1.1',
            el: '#timelinebox',//默认容器
            direction: 'vertical',
            data: 'main/loadSideBarNodes'
        };
        _that.config = {
            el: undefined,
            data: undefined,
            delay: undefined,
            direction: undefined,
            callback: undefined
        };
        _that.autoPlay = function () {
            // debugger
            var lis = document.querySelectorAll(_that.config.el + ' li');
            var ps = document.querySelectorAll(_that.config.el + ' li p');
            // var lis = document.querySelectorAll( '#timelinebox li');
            // var ps = document.querySelectorAll('#timelinebox li p');
            var delayTime = _that.config.delay;
            if (delayTime === undefined || delayTime === null) {
                delayTime = 3000;
            }
            if (_that.config.callback === undefined || _that.config.callback === null) {
                timer = setInterval(function () {
                    if (timeindex < ps.length - 1) {
                        //执行下一个
                        _that.classChange(ps, lis, ps[timeindex + 1]);
                        timeindex++;
                    } else {
                        //跳转到开始
                        timeindex = 0;
                        _that.classChange(ps, lis, ps[timeindex]);
//		                timer=clearInterval(timer);
//		                var bofangzanting = document.getElementById('bofangzanting');
//		                bofangzanting.classList.remove('icon-zanting');
//		                bofangzanting.classList.add('icon-bofang');
                    }
//		            console.log(timeindex)
                }, delayTime)
            } else {
                timer = setInterval(function () {
//		            console.log('自动播放啦！')
                    if (timeindex < ps.length - 1) {
                        //执行下一个
                        _that.classChange(ps, lis, ps[timeindex + 1]);
                        timeindex++;
                    } else {
                        console.log(timeindex);
                        //跳转到开始
                        timeindex = 0;
                        _that.classChange(ps, lis, ps[timeindex]);
                        //跳转到开始
//		                timeindex = 0;
//		                console.log(timeindex);
//		                _that.classChange(ps, lis, ps[timeindex]);
//		                timer=clearInterval(timer);
//		                var bofangzanting = document.getElementById('bofangzanting');
//		                bofangzanting.classList.remove('icon-zanting');
//		                bofangzanting.classList.add('icon-bofang');
                    }
//		            console.log(timeindex);
                    var year = _that.config.data[timeindex];
                    _that.config.callback(year);
                }, delayTime)
            }
        },
        this.getHtml = function (e, c) {
            var timeindex = window.timeindex = 0;
            var timer = window.timer = null;
            //创建时间轴对应的li
            var createUl = document.createElement('ul');
            $(createUl).addClass('scroll');
            if (_that.config.direction == undefined && _that.info.direction == 'vertical' || _that.config.direction == 'vertical') {
                $(createUl).addClass('vertical-direction');
            } else {
                $(createUl).addClass('horizontal-direction');
            }
            var html = '<i class="timelinebtn iconfont icon-play-square-fill" id="bofangzanting"></i>';
            $(createUl).html(html);
            c[0].appendChild(createUl);
            e.map(function (k) {
                var createLi = document.createElement('li');
                var createP = document.createElement('p');
                createP.innerHTML = k;
                createLi.appendChild(createP);
                createUl.appendChild(createLi);
            })
            console.log(createUl);
            console.log(c[0]);
            console.log(c);
            //默认选中第一个
            var lis = document.querySelectorAll('#' + c[0].id + ' li');
            lis[0].classList.add('selecteded');
            var ps = document.querySelectorAll('#' + c[0].id + ' li p');
            ps[0].classList.add('biaoqian');
        },
        _that.classChange = function (ps, lis, target) {
            ps.forEach(function (k) {
                k.classList.remove('biaoqian');
            })
            target.classList.add('biaoqian');
            lis.forEach(function (v) {
                v.classList.remove('selecteded');
            })
            target.parentNode.classList.add('selecteded');
        }
    };
    Timeline.prototype.render = function (options) {
        var _that = this;
        var _config = _that.config;
//	        console.log(_config);
        if (options === undefined || options === null) {
            //如果未配置
            _config.el = _that.info.el;
            _config.data = _that.info.data;
        } else {
            _that.config.data = undefined;
            $.extend(true, _that.config, options);
        }
//	        console.log(_that.config);
        var $container = common.getContainer(_that);
        if ($container === null) {
            return;
        }
        var timelineData = _config.data;
//			console.log(timelineData);
        var html = _that.getHtml(timelineData, $container);
        $container.html(html);
    };
    /**
     * 绑定事件
     * @param {String} events
     * @param {Function} callback
     */
    Timeline.prototype.on = function (events, callback) {
        var that = this;
//      console.log(that.config.data);
        if (that.config.el === undefined && that.config.el === null) {
            that.config.el = that.info.el;
        }
        var _con = that.config.el;
        //alert(_con);
        if (typeof (events) !== 'string') {
            common.throwError('Timeline error:事件名配置出错，请参考API文档.');
        }
        var lIndex = events.indexOf('(');
        var eventName = events.substr(0, lIndex);
        var filter = events.substring(lIndex + 1, events.indexOf(')'));
//      console.log(eventName);
        //点击事件
        if (eventName === 'click') {
            var ulElement = document.querySelector(_con + ' ul');
            ulElement.onclick = function (e) {
                var lis = document.querySelectorAll(_con + ' ul li');
                var ps = document.querySelectorAll(_con + ' ul li p');
                var event = e || window.event;
                var target = event.target || event.srcElement;
                if (target.tagName == 'P') {
                    that.classChange(ps, lis, target);
                    for (var i = 0; i < lis.length; i++) {
//			                console.log(lis[i].getAttribute('class'))
                        if (lis[i].getAttribute('class') == 'selecteded') {
                            //记住此时被点击的索引,方便点击播放按钮时继续播放
                            timeindex = i;
//			                    console.log(Timeline);
                            var year = that.config.data[timeindex];
                            callback(year);
                            break;
                        }

                    }
                }
            }
            //播放和暂停按钮
            var bofangzanting = document.getElementById('bofangzanting');
            if (bofangzanting) {
                bofangzanting.onclick = function () {
                    if (bofangzanting.className.indexOf('icon-play-square-fill') != -1) {
//			                console.log('点击播放')
//			                console.log(timer)
                        bofangzanting.classList.remove('icon-play-square-fill');
                        bofangzanting.classList.add('icon-poweroff-circle-fill');
                        if (timer == undefined) {
                            that.autoPlay();
                            console.log(that.config.el);
                        }
                    } else {
//			                console.log('点击暂停')
                        bofangzanting.classList.remove('icon-poweroff-circle-fill');
                        bofangzanting.classList.add('icon-play-square-fill');
                        if (timer) {
                            timer = clearInterval(timer);
                        } else {
                            return;
                        }
                    }
                }
            }


        }

    };


//  function getHtml(e,c){
//  	var timeindex=window.timeindex = 0
//	    var timer=window.timer=null;
//	    console.log(e);
//	    //创建时间轴对应的li
//	    e.map(k => {
//	        var createLi = document.createElement('li')
//	        var createP = document.createElement('p')
//	        createP.innerHTML = k
//	        createLi.appendChild(createP)
//	        c[0].appendChild(createLi)
//	    })
//	    //默认选中第一个
//	    var lis = document.querySelectorAll('#timeline li')
//	    lis[0].classList.add('selecteded')
//	    var ps = document.querySelectorAll('#timeline li p')
//	    ps[0].classList.add('biaoqian')
//  }


    //公共部分,清除掉所有的样式,再给点击的添加相应的类名
//  function classChange(ps, lis, target) {
//      ps.forEach(k => {
//          k.classList.remove('biaoqian')
//      })
//      target.classList.add('biaoqian')
//      lis.forEach(v => {
//          v.classList.remove('selecteded')
//      })
//      target.parentNode.classList.add('selecteded')
//  }


    //自动播放
//  function autoPlay() {
//      var lis = document.querySelectorAll('#timeline li');
//      var ps = document.querySelectorAll('#timeline li p');
//      timer = setInterval(() => {
//          console.log('自动播放啦！')
//          if (timeindex < ps.length - 1) {
//              //执行下一个
//              classChange(ps, lis, ps[timeindex + 1])
//              timeindex++
//          } else {
//              //跳转到开始
//              timeindex = 0
//              classChange(ps, lis, ps[timeindex]);
//              timer=clearInterval(timer);
//              var bofangzanting = document.getElementById('bofangzanting');
//              bofangzanting.classList.remove('icon-zanting');
//              bofangzanting.classList.add('icon-bofang');
//          }
//          console.log(timeindex)
//      }, 1000)
//  }
    var timeline = new Timeline();
    //输出test接口
    exports('timeline', timeline);
});
